<template>
  <div>
    <base-panel>
      <top-simple-search
              @addFun="toAdd"
              @searchFun="query"
      >
        <el-form-item label="" prop="approver">
          <el-select
                  v-model="categoryId"
                  placeholder="请选择分类"
                  class="full-width"
                  clearable
          >
            <el-option
                    v-for="item in categoryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </top-simple-search>
      <simple-table ref="myTable" api-url="news">
        <el-table-column align="left" prop="title" label="标题"  min-width="340" show-tooltip-when-overflow>
          <template slot-scope="{ row }">
            <my-link @to="gotoDetail(row)" handle="Retrieve">{{row.title}}</my-link>
          </template>
        </el-table-column>
        <el-table-column
                align="left"
                prop="category_name"
                label="所在分类"
                width="120"
        >
        </el-table-column>
        <el-table-column align="left" prop="hits" label="点击数" width="80">
        </el-table-column>
<!--        <el-table-column align="left" prop="no_order" label="排序" width="80">-->
<!--          <template slot-scope="{ row }">-->
<!--            {{ row.no_order }}-->
<!--            <edit-cell-->
<!--                    :id="row.id"-->
<!--                    :value="row.no_order"-->
<!--                    @change="changOrder"-->
<!--            ></edit-cell>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
                align="left"
                prop="alias"
                label="创建者"
                width="80"
        >
        </el-table-column>

        <el-table-column align="left" prop="top_ok" label="顶置" width="80">
          <template slot-scope="{ row }">
            <my-switch
                    :id="row.id"
                    :switch-value="row.top_ok"
                    @change="changTopOk"
                    handle="dingzhi"
            ></my-switch>
          </template>
        </el-table-column>
        <el-table-column
                align="left"
                prop="com_ok"
                label="是否首页推荐"
                width="120"
        >
          <template slot-scope="{ row }">
            <my-switch
                    :id="row.id"
                    :switch-value="row.com_ok"
                    @change="changComOk"
                    handle="tuijian"
            ></my-switch>
          </template>
        </el-table-column>
        <el-table-column
                align="left"
                prop="is_allow"
                label="是否审核"
                width="80"
        >
          <template slot-scope="{ row }">
            <my-switch
                    :id="row.id"
                    :switch-value="row.is_allow"
                    @change="changAllow"
                    handle="shenhe"
            ></my-switch>
          </template>
        </el-table-column>
        <el-table-column
                align="left"
                prop="url"
                label="是否外链"
                width="80"
        >
          <template slot-scope="{ row }">
            <span v-if="row.url"> <a href="javascript:" @click="gotoPage(row.url)" style="color: #3d37bf;">是</a></span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column
                align="left"
                prop="pub_time"
                label="发布时间"
                width="200"
        >
        </el-table-column>
        <el-table-column align="left" fixed="right" label="操作" width="100">
          <template slot-scope="{ row }">
            <edit-button @click="editCategory(row)"></edit-button>
            <delete-button @click="deleteCategory(row.id)"></delete-button>
          </template>
        </el-table-column>
      </simple-table>
    </base-panel>
    <news-edit-dialog
            :visible.sync="visible"
            v-if="visible"
            @reloadList="getNewsList"
            :row="currRow"
    ></news-edit-dialog>
  </div>
</template>

<script>
  import news from "@/api/news/index";
  import NewsEditDialog from "./dialog/newsEditDialog";
  import EditCell from "@/components/Common/EditCell";
  import MyLink from "@/components/MyLink/index";
  import MySwitch from "../../components/Common/MySwitch";

  export default {
    name: "newsList",
    components: {MySwitch, MyLink,EditCell,  NewsEditDialog},
    data() {
      return {
        visible: false,
        currRow: {},
        categoryList: [],
        categoryId: undefined,
      };
    },
    created() {
      this.getcategoryList()
    },
    watch: {},
    methods: {
      gotoDetail(row) {
        if(row.url){
          window.open(row.url)
        }else{
          window.open("/newsDetail?id="+row.id)
        }
        // this.currRow = row
        // this.visible = true
        //window.open(`${process.env.VUE_APP_BASE_URL}/column/detail/${id}`)
      },
      gotoPage(url) {
        window.open(url)
      },
      // typeFormatter(row) {
      //   for (var i = 0; i < this.categoryList.length; i++) {
      //     if (this.categoryList[i].id == row.type_id)
      //       return this.categoryList[i].name
      //   }
      //   return row.type_id
      // },
      getcategoryList() {
        news.getSimpleList().then(res => {
            this.categoryList = res.data;
        });
      },
      query(queryData) {
        if(this.categoryId=="")this.categoryId=undefined;
        this.$refs["myTable"].searchList({search_value: queryData, type_id: this.categoryId});
      },
      getNewsList() {
        this.$refs["myTable"].getList();
      },
      toAdd() {
        // this.currRow = row;
        // this.visible = true;
        this.$router.push("/news/release");
      },
      editCategory(row) {
        // this.currRow = row;
        // this.visible = true;
        this.$router.push("/news/release?id="+row.id);
      },
      deleteCategory(id) {
        this.$confirm("删除该文章, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          news.deleteNews(id).then(res => {
              this.msgSuccess("删除成功!");
              this.getNewsList();
          });
        });
      },
      changComOk(row) {
        news.editCom(row.id, {com_ok: row.value}).then(res => {
          this.callBackMessage(res);
        });
      },
      changTopOk(row) {
        news.editTop(row.id, {top_ok: row.value}).then(res => {
          this.callBackMessage(res);
        });
      },
      changAllow(row) {
        news.editAllow(row.id, {is_allow: row.value}).then(res => {
          this.callBackMessage(res);
        });
      },
      changOrder(row) {
        news.editOrder(row.id, {no_order: row.value}).then(res => {
          this.callBackMessage(res);
        });
      },
      callBackMessage(res) {
        this.msgSuccess("设置成功!");
        this.getNewsList();
      }
    }

  };
</script>

<style scoped>
  .add {
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: flex-end;*/
    margin: 10px 0;
  }
</style>
